<template>
  <div class="verifyIndexWrap h100">
    <div class="verifyIndexLeft">
      <full-parent-dom-with-dask :loading="loadingLists"></full-parent-dom-with-dask>
      <task-verify-search class="verifyIndexSearch" @clickbtn="handleClickSearchBtn"></task-verify-search>
      <ul class="verifyItems">
        <li
          class="verifyItem"
          @click="changeVerifyId(item)"
          :class="{ active: item.id === activeAuditItemInfo.activeVerifyItemId }"
          v-for="item in lists"
          :key="item.id">
          <span class="verifyName">
            <i class="iconfont" :class="getAuditType(item.relType, 'icon')"></i>
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.relName"></table-ellipsis>
          </span>
          <!-- <span class="verifyState">{{ auditStatusDictCodeObj[item.status] }}</span> -->
        </li>
        <li class="verifyItem" v-if="loadingLists === false && lists.length === 0">{{ $t('noData') }}</li>
      </ul>
      <div class="verifyIndexPagination">
        <a-pagination
          v-show="totalCount"
          simple
          :current="pageInfo.pageNo"
          :total="totalCount"
          :pageSize="pageInfo.pageSize"
          @change="changePageSize" />
      </div>
    </div>
    <div class="verifyIndexRight">
      <task-verify-detail
        :audit-item-info="activeAuditItemInfo"
        :verify-id="activeVerifyItemId"
        :linked-id="activeLinkId"
        :rel-type="relType"
        :now-time="nowTime"
        @clickdetail="handleClickDetail"
        @saved="updateVerifyItem">
      </task-verify-detail>
    </div>
  </div>
</template>
<script>
import TaskVerifySearch from './components/TaskVerifySearch'
import TaskVerifyDetail from './components/TaskVerifyDetail'
import verifyApi from '@/api/modules/system/verify'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { mapState, mapMutations } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ServiceDetail from '@/views/components/ServiceDetail.vue'
import { minxinDrawerUse } from '@/utils/mixin'
const initActiveAuditItemInfo = {
  activeVerifyItemId: '',
  activeLinkId: '',
  relType: '',
  linkedExtId: ''

}
export default {
  mixins: [minxinDrawerUse],
  components: {
    TaskVerifySearch,
    TaskVerifyDetail,
    FullParentDomWithDask,
    TableEllipsis
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.verify.queryParams
    }),
    auditStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('auditStatusDictCode')
    }
  },
  data () {
    return {
      loadingLists: false,
      lists: [],
      pageInfo: {
        pageSize: 14,
        pageNo: 1
      },
      totalCount: 0,
      // 当前选中的审核项Id
      activeVerifyItemId: '',
      // 当前审核项关联的实体id,如审核的是任务则是任务id
      activeLinkId: '',
      // 当前审核项关联的实体类型
      relType: '',
      nowTime: 123654789,
      activeAuditItemInfo: { ...initActiveAuditItemInfo }
    }
  },
  created () {
    this.getPageDictData()
    if (!this.$route.query.relName) {
      this.loadData()
    }
  },
  methods: {
    // 获取审核项
    loadData () {
      this.lists = []
      this.activeVerifyItemId = ''
      this.activeLinkId = ''
      this.relType = ''
      this.loadingLists = true
      this.activeAuditItemInfo = { ...initActiveAuditItemInfo }
      const params = { ...this.pageInfo }
      params.relName = this.queryParams.relName
      if (this.queryParams.actionStatus === 'dsh') {
        params.actionStatus = 1
        params.actionItemStatus = 1
      }
      verifyApi.getVerifyPageData(params).then(res => {
        const { data } = res
        this.totalCount = res.totalCount
        if (data.length === 0) {
          return
        }
        this.activeAuditItemInfo = {
          activeVerifyItemId: data[0].id,
          activeLinkId: data[0].relType === 'SOTA_MODEL_SERVICE' ? data[0].relDataId : data[0].relId,
          relType: data[0].relType,
          linkedExtId: data[0].relIdExt
        }
        this.nowTime = Date.now()
        this.lists = res.data.map(item => {
          return {
            id: item.id,
            relName: item.relName,
            status: item.status,
            relId: item.relType === 'SOTA_MODEL_SERVICE' ? item.relDataId : item.relId,
            relType: item.relType,
            relIdExt: item.relIdExt
          }
        })
      }).finally(() => {
        this.loadingLists = false
      })
    },
    changeVerifyId (item) {
      if (this.activeAuditItemInfo.activeVerifyItemId === item.id) {
        return
      }
      this.nowTime = Date.now()
      this.activeAuditItemInfo = {
        activeVerifyItemId: item.id,
        activeLinkId: item.relId,
        relType: item.relType,
        linkedExtId: item.relIdExt
      }
    },
    getPageDictData () {
      ['getAuditStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    },
    changePageSize (page) {
      this.pageInfo.pageNo = page
      this.loadData()
    },
    handleClickSearchBtn (data) {
      if (this[data.type]) {
        this[data.type]()
      }
    },
    searchData (isToFirstPage = true) {
      if (isToFirstPage) {
        this.pageInfo.pageNo = 1
      }
      this.loadData()
    },
    // 修改审核项的状态
    updateVerifyItem (data) {
      const item = this.lists.find(item => data.verifyId === item.id)
      if (item) {
        item.status = data.status
      }
    },
    getAuditType (typeVal, key = 'title') {
      const config = {
        FOTA_NORMAL_TASK: {
          title: this.$t('task'),
          icon: 'icon-renwu'
        },
        FOTA_UPGRADE_STRATEGY: {
          title: this.$t('strategy'),
          icon: 'icon-celve'
        },
        SOTA_MODEL_SERVICE: {
          title: this.$t('service'),
          icon: 'icon-yuyuefuwu'
        }
      }
      if (config[typeVal]) {
        return config[typeVal][key]
      }
      return '-'
    },
    // 查看服务详情
    showServiceDetail (data) {
      const vm = this
      const vars = { serviceId: data.serviceId }
      vm.showRightDrawer(ServiceDetail, vm.$t('serviceDetail'), [], 'large', vars)
    },
    handleClickDetail (data) {
      const method = this[data.key]
      if (method) {
        method(data.data)
      }
    }
  },
  beforeDestroy () {
    this.$store.commit('resetVerifyEcuQueryParams')
  }
}
</script>
<style lang="less" scoped>
.verifyIndexWrap {
  display: flex;

  .verifyIndexLeft {
    position: relative;
    width: 25%;
    min-width: 300px;
    flex: none;
    overflow: auto;
    padding-top: 24px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid @borderColor;

    .verifyIndexSearch {
      padding: 0 12px;
      flex: none;
      margin-bottom: 10px;
    }

    .verifyItems {
      flex: 1 0 0;
      overflow: auto;

      .verifyItem {
        height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 12px;
        cursor: pointer;
        color: @color333;
        justify-content: space-between;

        .verifyName {
          flex: 1 0 0;
          min-width: 200px;
          padding-right: 20px;
          display: flex;
          align-items: center;
        }

        .verifyState {
          flex: none;
        }

        &:hover {
          background-color: @blockHoverBgColor;

          .verifyName {
            color: @blockHoverTextColor;
          }
        }

        &.active {
          .verifyName {
            color: @blockHoverTextColor;
          }
        }
      }

      .iconfont {
        margin-right: 5px;
      }
    }

    .verifyIndexPagination {
      text-align: right;
      margin-top: 5px;
      flex: none;
    }
  }

  .verifyIndexRight {
    flex: 1 0 0;
    overflow: auto;
  }
}
</style>
